<%--
  Created by IntelliJ IDEA.
  User: 0927
  Date: 2020/10/5
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>收藏车辆</title>
    <script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/sellCar.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/footer.css">

    <style>
        /* Custom Styles */
        ul.nav-tabs{
            width: 140px;
            margin-top: 20px;
            border-radius: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 4px rgba(0, 0, 0, 0.067);
        }
        ul.nav-tabs li{
            margin: 0;
            border-top: 1px solid #ddd;
        }
        ul.nav-tabs li:first-child{
            border-top: none;
        }
        ul.nav-tabs li a{
            margin: 0;
            padding: 8px 16px;
            border-radius: 0;
        }
        ul.nav-tabs li.active a, ul.nav-tabs li.active a:hover{
            color: #fff;
            background: #0088cc;
            border: 1px solid #0088cc;
        }
        ul.nav-tabs li:first-child a{
            border-radius: 4px 4px 0 0;
        }
        ul.nav-tabs li:last-child a{
            border-radius: 0 0 4px 4px;
        }
        ul.nav-tabs.affix{
            top: 30px; /* Set the top position of pinned element */
        }

        .img-p{
            width: 60px;
            height: 60px;
            margin: 30px auto 10px;
            background: url("${pageContext.request.contextPath}/images/xrb.png") no-repeat;
        }
        .user-info{
            margin-bottom: 24px;
            font-size: 18px;
            color: #495056;
            text-align: center;
        }
        .user-info span{
            display: block;
            font-size: 14px;
            color: #a5abb2;
            text-align: center;
        }
        .body{
            background-color: #f8f8f8;
        }
        .person{
            background-color: #fff;
            border: 1px solid #dcdcdc;
        }
        .pricedown{
            height: 18px;
            margin-right: 9px;
            padding-right: 2px;
            line-height: 18px;
            color: #ff7e00;
            border: 1px solid #ff7e00;
        }
        .through{
            font-size: 14px;
            color: #999;
            text-decoration: line-through;
            text-decoration-line: line-through;
            text-decoration-style: solid;
            text-decoration-color: currentcolor;
            text-decoration-thickness: auto;
        }
        .mile{
            font-size: 12px;
            color: #999;
        }

        .h2{
            font-size: 16px;
            font-weight: 400;
            color: #000;
            line-height: 1em;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }
        .ahoner:hover{
            text-decoration:none;
            background-color:white;
            color:red;
        }
    </style>
</head>
<body class="body">
<!--nav开始-->
<div id="nav_my">

</div>
<!--nav结束-->
<!--nav beigin-->
<%--<div class="container-fluid">--%>

<div class="container">
    <div class="jumbotron">
        <div class="row">
            <form class="form-horizontal" role="form" id="registerForm">
                <div class="form-group col-lg-3">
                    <label for="uname" class="col-md-3 control-label">姓名</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" name="uname" onblur="checknick()" id="uname" value="${detail.uname}">
                    </div>
                </div>
                <div class="form-group col-lg-3">
                    <label for="upwd" class="col-md-3 control-label">密码</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" name="upwd" id="upwd" value="${detail.upwd}">
                    </div>
                </div>
                <div class="form-group col-lg-3">
                    <label for="uphoto" class="col-md-3 control-label">头像</label>
                    <div class="col-md-9">
                        <input type="text" class="form-control" name="uphoto" id="uphoto" value="${detail.uphoto}">
                    </div>
                </div>
                <div class="form-group col-lg-3">
                    <div class="col-md-offset-2 ">
                        <button type="button" class="btn btn-primary" onclick="update()">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="row">
        <div class="col-md-2" id="myScrollspy">
            <ul class="nav nav-tabs nav-stacked" data-spy="affix" data-offset-top="125">
                <li>
                    <p class="img-p"></p>
                    <p class="user-info">个人中心
                        <span>手机号：${detail.uphone}</span>
                    </p>
                </li>
                <li class="active"><a href="${pageContext.request.contextPath}/Personal/Store">收藏车辆</a></li>
                <li><a href="${pageContext.request.contextPath}/Personal/history">浏览记录</a></li>
                <li><a href="${pageContext.request.contextPath}/Personal/reduce">降价提醒</a></li>
            </ul>
        </div>
<%--        <div class="col-md-9 person">--%>
        <div class="col-md-10">

            <c:if test="${empty collViews}">
                <div style="text-align: center; height: 100%">
                    <div style="margin-top: 20%">
                        <div style="margin-bottom: 10px;font-size: 30px;color: #757f89;text-align: center;">
                            暂无收藏车辆
                        </div>
                        <div style="text-align: center;">
                            <a href="${pageContext.request.contextPath}/#/#" style="font-size: 16px; color: #22ac38;">
                                去逛逛瓜子海量车源
                            </a>
                        </div>
                    </div>

                </div>
            </c:if>

            <c:forEach var="p" items="${collViews}" begin="0" end="100">
            <div class="col-md-4">
                <div class="thumbnail" >
                    <img src="${pageContext.request.contextPath}/images/car1.png"
                         alt="" style="width: 80%;">
                    <div class="caption car_info ">
                        <p class="h2" style="font-size: 15px">
                            <a class="ahoner" href="${pageContext.request.contextPath}/cardetail/infor?id=${p.id}">
                                    ${p.brName} ${p.stName} ${p.cPaifang}L ${p.cDrive}
                            </a>
                        </p>
                        <span class="mile">${p.cRegistration}年 | ${p.cMileage}万公里 | 到店服务</span>
                        <p style="margin-top: 5px"><span style="color: #f76367;font-size: 18px">${p.cOprice}万</span>
<%--                            <span class="pricedown">--%>
<%--                                <em>已降</em>--%>
<%--                                &nbsp;9400元</span>--%>
                            <span class="through">${p.cOprice}万</span>
                            <span style="float: right"><a onclick='del(this,${p.id})' class="text-danger" href="#"><span class="glyphicon glyphicon-trash"></span></a></span>
                        </p>
                    </div>
                </div>
            </div>
            </c:forEach>
        </div>
    </div>
    <br>
</div>

<%--</div>--%>
<!--footer-->
<div id="footer">

</div>
<!--footer-->
<!--question end-->
<script src="${pageContext.request.contextPath}/js/jquery-3.4.1.js"></script>
<script src="${pageContext.request.contextPath}/plugins/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<script type="text/javascript"></script>
<script>

    function update(){
        let pwd = $("#upwd").val();
        let uname = $("#uname").val();
        if(!(/^(\w){6,12}$/.test(pwd))){
            alert("密码不符合要求，请重新填写");
            return;
        }else if (!uname){
            alert("姓名不能为空")
        }
        let register_value = $("#registerForm").serialize();//表单序列化
        //发送key-value
        $.post('${pageContext.request.contextPath}/userDetail/update',register_value,function(data){
            success:function ss(data) {
                if (data.code == 200){
                    document.getElementById("uname").value=data.uname;
                    document.getElementById("upwd").value=data.upwd;
                    document.getElementById("uphoto").value=data.uphoto;
                    alert("修改成功")
                }else {
                    alert("网络异常")
                }
            }
        });
    }

    function del(obj,id){
        $.post('${pageContext.request.contextPath}/Personal/Unfavorite',{"id":id},function(data){
            if(data.code=="200"){
                let div = obj.parentElement.parentElement.parentElement.parentElement.parentElement;
                $(div).remove();
            }else {
                alert("删除失败")
            }
        })
    }

    // $(function () {
    //     $("#reg").click(function () {
    //         let username = $("#username").val();
    //         let phone = $("#phone").val();
    //         let pwd = $("#pwd").val();
    //
    //
    //         if(!(/^(\w){6,12}$/.test(pwd))){
    //             alert("密码不符合要求，请重新填写");
    //             return;
    //         }
    //
    //         let ch;
    //         var checkAgain = document.getElementsByName("check");
    //         for (i in checkAgain){
    //             if (checkAgain[i].checked){
    //                 ch = true;
    //             }
    //         }
    //
    //         if (!ch){
    //             alert("未同意注册协议不可进行注册！！！");
    //             return;
    //         }
    //         window.location= "/prj/logAndRegist/register?username="+username+"&phone="+phone+"&pwd="+pwd;
    //     });
    //
    // });


    // $("#uname").mouseout(function () {
    //     let uname = $("#uname").val();
    //     if (!uname){
    //         alert("姓名不能为空")
    //     }
    //     return
    // }
    // $("#upwd").mouseout(function () {
    //     let pwd = $("#upwd").val();
    //     if(!(/^(\w){6,12}$/.test(pwd))){
    //         alert("密码不符合要求，请重新填写");
    //         return true;
    //     }
    //     else {
    //         return true;
    //     }
    // }
        // function checknickname() {
    //     var nickname = document.querySelector("[type='text']")
    //     var value = nickname.value
    //     var tip = document.querySelector("#nn")
    //     if(!value){
    //
    //         tip.innerHTML = "昵称不能为空"
    //         return false
    //     } else {
    //         tip.innerHTML = ""
    //     }
    //     return true
    // }
    // function chekcPwd() {
    //     var pwd = document.querySelector("input[type='password']")
    //     var value = pwd.value
    //     var tip = document.querySelector("#pwdtip")
    //
    //     if(!(/^\S\S{5,15}$/.test(value))){
    //         tip.style.display = "inline"
    //         return false;
    //     } else {
    //         tip.style.display = "none"
    //     }
    //
    //     return true;
    // }
    //
    // function checknick() {
    //
    //     var nickname = document.querySelector("input[type='text']");
    //     var value = nickname.value
    //     var tip = document.querySelector("#nn")
    //     if(!value){
    //         console.log("请输入昵称")
    //         tip.innerHTML = "请输入昵称"
    //         return false
    //     }
    //     }

    $(function(){
        $("#nav_my").load("${pageContext.request.contextPath}/loadJsp/toNav");
        $("#footer").load("${pageContext.request.contextPath}/loadJsp/toFooter");
    })
</script>
</body>
</html>


